<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="form.user" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.pass" placeholder="地址"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="chong">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
            ref="multipleTable"
            :data="reslist"
            tooltip-effect="dark"
            style="width: 100%"
        >
            <!-- @selection-change="handleSelectionChange" -->
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="电话号码" width="220" prop="mobile">
                <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column label="id" width="220" prop="uid">
                <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column label="头像" width="220">
                <template slot-scope="scope">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.avatar"
                        :preview-src-list="srcList"
                        @dblclick="da(scope.row.avatar)"
                    >
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="adress" label="地址" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <el-button type="primary" @click="xiu(scope.row)"
                        >修改</el-button
                    >
                    <el-button type="primary" @click="del(scope.row.uid)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="收货地址" :visible.sync="show">
            <el-form :model="form">
                <el-form-item label="姓名">
                    <el-input
                        v-model="form.nickname"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="form">
                <el-form-item label="地址">
                    <el-input
                        v-model="form.adress"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="show = false"
                    >确 定</el-button
                >
            </div>
        </el-dialog>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagename"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.list.length"
        >
        </el-pagination>
    </div>
</template>
<script>
export default {
    data() {
        return {
            form: {
                user: "",
                pass: "",
            },
            pagesize:5,
            pagename:1,
            show: false,
            form: {
                nickname: "",
                adress: "",
            },
            list: [],
            srcList: [],
            cate: [],
        };
    },
    mounted() {
        this.getlist();
    },
    computed:{
        reslist(){
          return  this.list.slice(
                this.pagesize*(this.pagename-1),
                this.pagesize*this.pagename
            )
        }
    },
    methods: {
        chong() {
            this.list = this.cate;
        },
        onSubmit() {
            this.list = this.cate.filter((item) => {
                return (
                    item.nickname.includes(this.form.user) &&
                    item.adress.includes(this.form.pass)
                );
            });
            this.form.user = "";
            this.form.pass = "";
        },
        xiu(obj) {
            console.log(obj);
            this.show = true;
            this.form = obj;
        },
        del(id) {
            this.list.forEach((item, index) => {
                this.list.splice(index, 1);
            });
        },
        da(obj) {
            this.srcList.push(obj);
        },
        getlist() {
            this.$axios.get("/list.json").then((res) => {
                this.list = res.data;
                this.cate = res.data;
                console.log(this.cate);
            });
        },
        handleSizeChange(res){
            console.log(res)
            this.pagesize=res
        },
        handleCurrentChange(res){
            console.log(res)
             this.pagename=res
        }

    },
};
</script>
<style lang="scss" scoped></style>
